<template>
  <div>
    <el-row>
      <el-col :span="6">
        【题型】：
        <span v-if="value.questionType === '1'">单选</span>
        <span v-else-if="value.row.questionType === '2'">多选</span>
        <span v-else>简答</span>
      </el-col>
      <el-col :span="6">【编号】：{{value.id}}</el-col>
      <el-col :span="6">
        【难度】：
        <span v-if="value.difficulty === '1'">简单</span>
        <span v-else-if="value.difficulty === '2'">一般</span>
        <span v-else>困难</span>
      </el-col>
      <el-col :span="6">【标签】：{{value.tags}}</el-col>
      <el-col :span="6">【学科】：{{value.subject}}</el-col>
      <el-col :span="6">【目录】：{{value.catalog}}</el-col>
      <el-col :span="6">【方向】：{{value.direction}}</el-col>
    </el-row>
    <hr>
    <div>【题干】：</div>
    <div v-html="value.question" class="questionText"></div>
    <div>
      <div v-if="value.questionType === '1'">
        单选选项: (以下选项为正确答案)
        <div>
          <el-radio v-model="radio" label="1">A</el-radio>
          <el-radio v-model="radio" label="2">B</el-radio>
          <el-radio v-model="radio" label="3">C</el-radio>
          <el-radio v-model="radio" label="4">D</el-radio>
        </div>
      </div>
      <div v-else-if="value.row.questionType === '2'">
        多选选项: (以下选项为正确答案)
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="A"></el-checkbox>
          <el-checkbox label="B"></el-checkbox>
          <el-checkbox label="C"></el-checkbox>
          <el-checkbox label="D"></el-checkbox>
          <el-checkbox label="E"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div v-else>
        简答选项: (以下选项为正确答案)
        <div v-html="value.answer" class="questionText"></div>
      </div>
    </div>
    <hr>
    <div>
      【参考答案】：
      <el-button type="danger" size="small" @click="isVideoShow=!isVideoShow">视频答案预览</el-button>
      <el-row style="margin-top:20px;" v-if="isVideoShow">
        <video :src="value.videoURL" controls class="video"></video>
      </el-row>
    </div>
    <hr>
    <div>
      【答案解析】：
      <span v-html="value.answer"></span>
    </div>
    <hr>
    <div>
      【题目备注】：
      <span v-html="value.remarks"></span>
    </div>
  </div>
</template>
<script>
// import { getRandoms } from '@/api/questions.js'
export default {
  name: 'questionsPreview',
  components: {},
  watch: {},
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 单选
      radio: '1',
      // 多选
      checkList: ['A', 'C'],
      isVideoShow: false
    }
  },
  computed: {},
  created() {
    // this.preview()
  },
  mounted() {},
  methods: {}
}
</script>
<style lang="less" scoped>
.questionText {
  color: #4040ff;
}
.el-col {
  padding: 10px 0;
}
.video {
  width: 400px;
}
</style>
